import React,{ Component } from "react";
import { View,Text,StyleSheet,ScrollView,Image,TouchableOpacity,BackHandler,ToastAndroid,TouchableNativeFeedback  } from "react-native";
import Swiper from "../common/SwiperJS";
import SplashScreen from 'react-native-splash-screen'

export default class HomePage extends Component {
    constructor(props){
        super(props);
        this.state = {
            List:[
                {
                    img:require('../../res/image/column/Col01.png'),
                    title:'学习教育',
                },
                {
                    img:require('../../res/image/column/Col02.png'),
                    title:'我的支部',
                },
                {
                    img:require('../../res/image/column/Col03.png'),
                    title:'老年大学',
                },
                {
                    img:require('../../res/image/column/Col04.png'),
                    title:'健康伴侣',
                },
                {
                    img:require('../../res/image/column/Col05.png'),
                    title:'热点话题',
                },
                {
                    img:require('../../res/image/column/Col06.png'),
                    title:'展示交流',
                },

                {
                    img:require('../../res/image/column/Col07.png'),
                    title:'我的圈子',
                },
                {
                    img:require('../../res/image/column/Col08.png'),
                    title:'便捷服务',
                },
            ],
            tabloidPic:[
                {
                    img:require('../../res/image/Home_5.jpg'),
                    title:'马克思主义基本理论',
                },
                {
                    img:require('../../res/image/Home_4.jpg'),
                    title:'马克思主义基本理论123',
                },
                {
                    img:require('../../res/image/Home_3.jpg'),
                    title:'马克思主义基本理论79798',
                }
            ],
            news:[
                {
                    title:"生态环境部“千里眼”执法效力初显 城市热点网 格无连续二次预警",
                    date:'2018-08-08',
                },
                {
                    title:"中央环保督察“回头看”将严查“一刀切”",
                    date:'2018-09-08',
                },
                {
                    title:"习近平抵达莫尔兹比港 开始对巴布亚新几内亚 进行国事访问",
                    date:'2018-10-08',
                },
            ],
        }
    }
    static navigationOptions = ({ navigation })=>({
        title:navigation.getParam("HomePageData")?navigation.getParam("HomePageData"):"首页",
    });
    // componentWillMount(){//执行一次，在初始化render之前执行，
    //     BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    // }
    componentDidMount(): void {
       setTimeout(()=>{
           SplashScreen.hide();
       },2000);
    }

    // componentWillUnmount() {//当组件要被从界面上移除的时候，就会调用componentWillUnmount(),在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等
    //     BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    // }
    onBackAndroid = () => {
        console.log(this.props.navigation.state.routeName);
        //这里的路由信息是你自己项目中的，通过这个原理，我们还是可以提示一些其他信息，比如表单没填写完整等等
        if (this.props.navigation.state.routeName == "HomePage") {//写入当前页面的路由信息
            if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {//按第二次的时候，记录的时间+2000 >= 当前时间就可以退出
                //最近2秒内按过back键，可以退出应用。
                BackHandler.exitApp();//退出整个应用
                return false
            }
            this.lastBackPressed = Date.now();//按第一次的时候，记录时间
            ToastAndroid.show('再按一次退出应用', ToastAndroid.SHORT);//显示提示信息
            return true;
        } else {
            return true;
        }
    };
    Listdisplay(){  //列表展示
        const { navigation } = this.props;
        let Array = [];
        this.state.List.map((item,index,data)=>{
            let info = (
                <TouchableOpacity onPress={()=>{
                    switch(index){
                        case 0:
                            navigation.navigate("LearningEdu");
                            break;
                       	case 1:
                       		navigation.navigate("myBranch");
                       		break;
                       	case 2:
                       		navigation.navigate("allPages");
                       		break;
                       	case 3:
                       		navigation.navigate("healthyPartner");
                       		break;
                        case 5:
                            navigation.navigate("StudentD");
                            break;
                    }
                }}>
                <View style={ styles.itemStyle } key={index}>
                    <Image style={ styles.image } source={item.img} />
                    <Text style={ styles.itemText }>{ item.title }</Text>
                </View>
                </TouchableOpacity>
            );
            Array.push(info);
        });
        return Array;
    }
    ItemTabloid(){  //横向的图片信息展示
        const { navigation } = this.props;
        let Array = [];
        this.state.tabloidPic.map((item,index,data)=>{
            let info = (
                <TouchableOpacity onPress={()=>{
                    navigation.navigate("NewsBroadcast",{ title:item.title })
                }}>
                <View style={[styles.itemStyleTa,styles.itemStyle]} key={index}>
                    <Image style={ styles.tabloidImage } source={ item.img } />
                    <Text ellipsizeMode={"tail"} numberOfLines={1} style={ styles.itemText  }>{ item.title }</Text>
                </View>
                </TouchableOpacity>
            );
            Array.push(info);
        });
        return Array;
    }
    newsBroadcast(){  //新闻播报
        let Array = [];
        this.state.news.map((item,index,data)=>{
            let info = (
                <View key={index} style={{padding:18,borderBottomColor:'#e5e5e5',borderBottomWidth: 1,}}>
                    <Text style={{paddingTop:15,paddingBottom: 10,fontSize:15,fontWeight:'bold',}}>
                        {item.title}
                    </Text>
                    <Text style={{color:'#b1b1b1'}}>
                        发布时间: {item.date}
                    </Text>
                </View>
            );
            Array.push(info);
        });
        return Array;
    }
    render(){
        const { navigation } = this.props;
        return (
            <ScrollView>
            <View style={ styles.conatiner }>
                <View style={ styles.Swipers } >
                    <Swiper/>
                </View>
            </View>
                <View style={styles.ListDisplay}>
                    { this.Listdisplay() }
                </View>
                <View style={ styles.tabloid }>
                    <View style={ styles.tabloidTop }>
                        <Text style={{fontWeight: 'bold',fontSize:20}}>图片新闻</Text>
                        <View style={styles.tabMore}>
                            <TouchableNativeFeedback onPress={()=>{
                                navigation.navigate("Tabloid",{ title:'图片新闻',position:0 })
                            }}>
                                <Text style={{fontSize:15,color:'#ababab'}}>查看更多</Text>
                            </TouchableNativeFeedback>
                            <Image style={{width:25,height:25,tintColor:'#b5b5b5'}} source={require('../../res/image/ic_tiaozhuan.png')}/>
                        </View>
                    </View>
                    <ScrollView
                        horizontal={true} // 横向
                        showsHorizontalScrollIndicator={false}  // 此属性为true的时候，显示一个水平方向的滚动条
                    >
                        { this.ItemTabloid() }
                    </ScrollView>
                </View>

                <View style={ styles.tabloid }>
                    <View style={ styles.tabloidTop }>
                        <Text style={{fontWeight: 'bold',fontSize:20}}>新闻播报</Text>
                        <View style={styles.tabMore}>
                            <Text style={{fontSize:15,color:'#ababab'}} onPress={()=>{
                                navigation.navigate("Tabloid",{ title:'新闻播报',position:1 })
                            }}>查看更多</Text>
                            <Image style={{width:25,height:25,tintColor:'#b5b5b5'}} source={require('../../res/image/ic_tiaozhuan.png')}/>
                        </View>
                    </View>
                    {/*新闻播报*/}
                    <View style={{flex:1,}}>
                        { this.newsBroadcast()}
                    </View>
                </View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    conatiner:{
        flex:1,
    },
    Swipers:{
        height:150,
        marginTop: 10,
    },
    ListDisplay:{
        flex:1,
        backgroundColor:'white',
        marginBottom: 10,
        flexDirection: 'row',
        flexWrap:'wrap',
        justifyContent: 'space-around',
        paddingTop:10,
    },
    image:{
        width:50,
        height:50,
        borderRadius:50,
    },
    itemStyle:{
        margin:15,
        marginBottom:5,
    },
    itemStyleTa:{
      width:125,
    },
    itemText:{
        marginTop: 5,
        // fontWeight: '300',
    },
    tabloid:{
        // height:220,
        backgroundColor:'white',
        marginBottom:10,
    },
    tabloidImage:{
        height:70,
        width:125,
        borderRadius: 4,
    },
    tabloidTop:{
        flex:1,
        height:60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop:20,
    },
    tabMore:{
        flexDirection:'row',
    },
});